<template>
	<transition name="fadeInOut">
		<div class="h">
			<mu-appbar style="width: 100%;" color="red" z-depth="0">
				<mu-button icon slot="left" @click.native="$router.go(-1)">
					<mu-icon value="chevron_left"></mu-icon>
				</mu-button>
				<span slot="default">{{$route.name}}</span>
				<mu-button icon slot="right">
					<!-- <mu-icon value="menu"></mu-icon> -->
				</mu-button>
			</mu-appbar>
			<div class="songs-wrap">
				<my-scroll>
					<div class="recommend-songs-wrap">
						<img src="" alt="">
						<div>
							<mu-list>
								<template v-for="song,key in songs" >
									<mu-list-item button >
										<mu-list-item-action>
											<mu-avatar style="border-radius: 4px;">
												<img :src="song.album.picUrl" style="border-radius: 4px;">
											</mu-avatar>
										</mu-list-item-action>
										<mu-list-item-content class="pt-7 pb-7">
											<mu-list-item-title>{{ song.name }}</mu-list-item-title>
											<mu-list-item-sub-title>{{ song.artists[0].name + ' - ' + song.album.name }}</mu-list-item-sub-title>
										</mu-list-item-content>
									</mu-list-item>
									<mu-divider></mu-divider>
								</template>
							</mu-list>
						</div>
					</div>
				</my-scroll>
			</div>
		</div>
	</transition>
</template>
<script>
	export default{
		data(){
			return{
				songs:[]
			}
		},
		mounted(){
			this._getRecommendSongs();
		},
		methods:{
			_getRecommendSongs(){
				this.$api.get(this.ApiPath.recommend.songs,{},success=>{
					this.songs = success.data.recommend;
				})
			}
		}
	}
</script>
<style lang="scss">
	.songs-wrap{
		height: calc(100% - 56px);
	}
</style>